<template>
	<div>
		<el-card>
			<el-form :model="state.pageParam.param" label-width="120" ref="queryFormRef" @keyup.enter.enter="loadList">
				<el-row>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="designerCode" label="应用设计编码">
							<el-input v-model="state.pageParam.param.designerCode" placeholder="应用设计编码" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="designerName" label="应用设计名称">
							<el-input v-model="state.pageParam.param.designerName" placeholder="应用设计名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="typeCode" label="业务类型">
							<DicSelect v-model="state.pageParam.param.typeCode" placeholder="请选择" dicCode="BUSINESS_TYPE" style="width: 100%"></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="hasTask" label="是否含流程">
							<DicSelect v-model="state.pageParam.param.hasTask" placeholder="请选择" dicCode="1008" style="width: 100%"></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="taskDefCode" label="流程定义编码">
							<el-input v-model="state.pageParam.param.taskDefCode" placeholder="流程定义编码" clearable> </el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="btnSearchStyle">
				<el-button type="primary" class="ml7" @click="loadList">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button type="primary" class="ml10" @click="reSetForm(queryFormRef)">
					<el-icon>
						<ele-Refresh />
					</el-icon>
					重置
				</el-button>
			</div>
		</el-card>
		<el-card>
			<div class="btnStyle">
				<el-button type="success" icon="ele-Plus" @click="addOrUpdateHandle()">新增</el-button>
			</div>
			<el-table :data="state.dataList" style="width: 100%">
				<el-table-column prop="designerCode" header-align="center" align="center" label="应用设计编码" />
				<el-table-column prop="designerName" header-align="center" align="center" label="应用设计名称" />
				<el-table-column prop="typeCode" header-align="center" align="center" label="业务类型" column-key="BUSINESS_TYPE" :formatter="formatStatus" />
				<el-table-column prop="hasTask" header-align="center" align="center" label="是否含流程" column-key="1008" :formatter="formatStatus" />
				<el-table-column prop="taskDefCode" header-align="center" align="center" label="流程定义" />
				<el-table-column prop="menuTxt" header-align="center" align="center" label="菜单路径" />
				<el-table-column
					prop="customizeApi"
					header-align="center"
					align="center"
					label="是否自定义接口"
					column-key="1008"
					:formatter="formatStatus"
				/>
				<el-table-column
					prop="resStatus"
					header-align="center"
					align="center"
					label="是否已发布"
					column-key="SCREEN_STATUS"
					:formatter="formatStatus"
				/>
				<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
					<template #default="scope">
						<el-button type="primary" link @click="publishHandle(scope.row)">发布</el-button>
						<el-button type="primary" link @click="updateHandle(scope.row)">修改</el-button>
						<el-button type="primary" link @click="deleteHandle(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="state.pageParam.page"
				background
				v-model:page-size="state.pageParam.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.total"
				small
			>
			</el-pagination>
		</el-card>
		<el-dialog
			:close-on-click-modal="false"
			:destroy-on-close="true"
			:title="!state.submitForm.id ? '新增' : '修改'"
			ref="addOrUpdate"
			v-model="state.addOrUpdateVisible"
			:append-to-body="true"
			width="65%"
		>
			<el-form
				:model="state.submitForm"
				:rules="state.submitFormRule"
				ref="ruleFormRef"
				@keyup.enter.enter="dataFormSubmit(ruleFormRef)"
				label-width="120px"
			>
				<el-row>
					<el-col :span="12">
						<el-form-item label="应用设计编码" prop="designerCode">
							<el-input v-model="state.submitForm.designerCode" placeholder="应用设计编码" maxlength="255"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="应用设计名称" prop="designerName">
							<el-input v-model="state.submitForm.designerName" placeholder="应用设计名称" maxlength="255"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="业务类型" prop="typeCode">
							<DicSelect v-model="state.submitForm.typeCode" placeholder="请选择" dicCode="BUSINESS_TYPE" style="width: 100%"></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否含流程" prop="hasTask">
							<DicSelect v-model="state.submitForm.hasTask" placeholder="请选择" dicCode="1008" style="width: 100%"></DicSelect>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="流程定义编码" prop="taskDefCode">
					<el-tree-select
						v-model="state.submitForm.taskDefCode"
						:data="state.treeData"
						:render-after-expand="false"
						style="width: 100%"
						:props="treeProps"
						ref="treeSelect"
						filterable
						@change="treeChange"
					/>
				</el-form-item>
				<el-form-item label="页面类型" prop="pageType" :rules="state.submitFormRule.pageType">
					<DicSelect
						v-model="state.submitForm.pageType"
						placeholder="请选择页面类型"
						dicCode="devFormType"
						style="width: 100%"
						@change="pageTypeChangeFn"
					></DicSelect>
				</el-form-item>
				<el-form-item label="新建时表单" prop="newFormId" v-if="state.submitForm.pageType !== '2'">
					<el-select
						v-model="state.submitForm.newFormId"
						filterable
						remote
						reserve-keyword
						placeholder="输入关键字搜索"
						:remote-method="remoteMethod"
						remote-show-suffix
						:loading="state.remoteLoading"
						style="width: 100%"
					>
						<el-option v-for="item in state.remoteOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="修改时表单" prop="modFormId" v-if="state.submitForm.pageType !== '2'">
					<el-select
						v-model="state.submitForm.modFormId"
						filterable
						remote
						reserve-keyword
						placeholder="输入关键字搜索"
						:remote-method="remoteMethod"
						remote-show-suffix
						:loading="state.remoteLoading"
						style="width: 100%"
					>
						<el-option v-for="item in state.remoteOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="详情表单" prop="detailFormId" v-if="state.submitForm.pageType !== '2'">
					<el-select
						v-model="state.submitForm.detailFormId"
						filterable
						remote
						reserve-keyword
						placeholder="输入关键字搜索"
						:remote-method="remoteMethod"
						remote-show-suffix
						:loading="state.remoteLoading"
						style="width: 100%"
					>
						<el-option v-for="item in state.remoteOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="菜单路径" prop="menuTxt">
					<el-input v-model="state.submitForm.menuTxt" placeholder="菜单路径" maxlength="255" disabled></el-input>
				</el-form-item>
				<!-- <el-form-item label="是否自定义接口" prop="customizeApi">
                    <DicSelect v-model="state.submitForm.customizeApi" placeholder="请选择" dicCode="1008" style="width:100%"></DicSelect>
                </el-form-item>
                <el-form-item label="新增接口url" prop="addApiUrl">
                    <el-input v-model="state.submitForm.addApiUrl" placeholder="新增接口url" maxlength="500"></el-input>
                </el-form-item>
                <el-form-item label="修改接口url" prop="updateApiUrl">
                    <el-input v-model="state.submitForm.updateApiUrl" placeholder="修改接口url" maxlength="500"></el-input>
                </el-form-item>
                <el-form-item label="表单数据加载接口" prop="detailApiUrl">
                    <el-input v-model="state.submitForm.detailApiUrl" placeholder="表单数据加载接口" maxlength="500"></el-input>
                </el-form-item> -->

				<div>
					<el-button type="success" icon="ele-Plus" @click="addFn">新增</el-button>
					<el-button type="primary" icon="Monitor" @click="previewFn" :disabled="state.submitForm.componentList.length == 0">预览</el-button>
				</div>

				<el-table :data="state.submitForm.componentList" style="width: 100%" class="main_tab" border>
					<!-- <el-table-column type="selection" width="55" /> -->
					<!-- 原有列 -->
					<el-table-column label="顺序" align="center" width="120" prop="orderNum">
						<template #default="{ $index }">
							<div class="sort-buttons">
								<el-button type="text" icon="el-icon-top" :disabled="$index === 0" @click="moveUp($index)" />
								<el-button
									type="text"
									icon="el-icon-bottom"
									:disabled="$index === state.submitForm.componentList.length - 1"
									@click="moveDown($index)"
								/>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="designerId" header-align="center" show-overflow-tooltip align="center" label="表单ID" />
					<el-table-column prop="designerCode" header-align="center" show-overflow-tooltip align="center" label="表单编码" />
					<!-- <el-table-column prop="componentId" header-align="center" show-overflow-tooltip align="center" label="组件ID" /> -->
					<el-table-column prop="componentCode" header-align="center" show-overflow-tooltip align="center" label="组件编码" />
					<!-- <el-table-column prop="detailFormJson" header-align="center" show-overflow-tooltip align="center" label="组件定义的json数据" /> -->
					<el-table-column fixed="right" header-align="center" align="center" label="操作">
						<template #default="scope">
							<el-button type="primary" link @click="deleteItem(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.addOrUpdateVisible = false">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(ruleFormRef)">确定</el-button>
				</span>
			</template>

			<el-dialog :close-on-click-modal="false" title="组件列表" ref="dialogListRef" v-model="state.ListVisible" width="80%" :destroy-on-close="true">
				<ComponentList ref="ComponentList_ref"></ComponentList>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="state.ListVisible = false">取消</el-button>
						<el-button type="primary" @click="sureFn">确定</el-button>
					</span>
				</template>
			</el-dialog>
		</el-dialog>

		<el-dialog :close-on-click-modal="false" :destroy-on-close="true" title="预览" ref="dialogPreview" v-model="state.previewVisible" width="80%">
			<vformpreview ref="vformpreview_ref" :previewList="state.previewList"></vformpreview>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="sysBusinessDesigner">
import { ElMessage, ElMessageBox, FormInstance, ElLoading } from 'element-plus';
import { ref, reactive, onMounted, watch, nextTick, defineAsyncComponent } from 'vue';
import { developApi } from '/@/api/sys/develop-api';
import { getDataDictionaryList } from '/@/utils/cacheDic';
const ComponentList = defineAsyncComponent(() => import('./ComponentList.vue')); // 外部接口设置
const vformpreview = defineAsyncComponent(() => import('./vformpreview.vue')); // 外部接口设置
interface ListItem {
	value: string;
	label: string;
}
const treeProps = {
	value: 'folderCode',
	label: 'folderName',
	disabled: (data: any) => data.children.length > 0, // 非叶子节点禁用
};
const queryFormRef = ref<FormInstance>();
const ruleFormRef = ref<FormInstance>();
const ComponentList_ref = ref();
const treeSelect = ref();
const vformpreview_ref = ref();
const state = reactive({
	previewVisible: false,
	previewList: [] as any,
	treeData: [] as any,
	row_designerCode: '',
	row_designerId: '',
	ListVisible: false,
	listLoading: false,
	total: 0,
	dataList: [],
	dataListSelections: [],
	dataDictionaryList: {} as any,
	remoteLoading: false,
	remoteOptions: ref<ListItem[]>([]),
	pageParam: {
		page: 1,
		pageSize: 10,
		param: {
			id: '',
			version: '',
			designerCode: '',
			designerName: '',
			typeCode: '',
			hasTask: '',
			taskDefCode: '',
			newFormId: '',
			modFormId: '',
			detailFormId: '',
			menuTxt: '',
			customizeApi: '',
			addApiUrl: '',
			updateApiUrl: '',
			detailApiUrl: '',
		},
	},
	addOrUpdateVisible: false,
	submitForm: {
		id: '',
		version: '',
		designerCode: '',
		designerName: '',
		typeCode: '',
		hasTask: '',
		taskDefCode: '',
		newFormId: '',
		modFormId: '',
		detailFormId: '',
		menuTxt: '',
		customizeApi: '0',
		addApiUrl: '',
		updateApiUrl: '',
		detailApiUrl: '',
		pageType: '',
		componentList: [] as any,
		resStatus: '0',
	},
	submitFormRule: {
		taskDefCode: { required: false, message: '请选择流程定义', trigger: 'change' },
		addApiUrl: { required: false, message: '新增接口不能为空', trigger: 'change' },
		updateApiUrl: { required: false, message: '修改接口不能为空', trigger: 'change' },
		detailApiUrl: { required: false, message: '表单数据加载接口不能为空', trigger: 'change' },
		designerCode: [{ required: true, message: '应用设计编码不能为空', trigger: 'change' }],
		designerName: [{ required: true, message: '应用设计名称不能为空', trigger: 'change' }],
		typeCode: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
		hasTask: [{ required: true, message: '是否含流程不能为空', trigger: 'change' }],
		customizeApi: [{ required: true, message: '是否自定义接口不能为空', trigger: 'change' }],
		pageType: [{ required: true, message: '请选择页面类型', trigger: 'change' }],
	},
});

const publishHandle = (row: any) => {
	window.console.log(row, 'row');
	ElMessageBox.confirm('确定发布操作?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	})
		.then(async () => {
			const loading = ElLoading.service({
				lock: true,
				text: '处理中',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			await developApi
				.getInfo(row.id)
				.then((data) => {
					if (data && data.code === 0) {
						if (data.data.componentList.length > 0) {
							data.data.componentList.sort((a: any, b: any) => a.orderNum - b.orderNum);
						}
						state.submitForm = data.data;

						state.submitForm.resStatus = '1';

						developApi
							.updateSysBusinessDesignerInfo(state.submitForm)
							.then((data) => {
								if (data && data.code === 0) {
									ElMessage.success('发布成功');
									state.addOrUpdateVisible = false;
									loadList();
								} else {
									ElMessage.error(data.message);
								}
							})
							.catch(() => {
								ElMessage.error('发布失败');
							})
							.finally(() => {
								loading.close();
							});
					} else {
						ElMessage.error(data.message);
					}
				})
				.catch(() => {
					ElMessage.error('获取详情失败');
				})
				.finally(() => {
					// loading.close();
				});
		})
		.catch(() => {});
};

const pageTypeChangeFn = () => {
	if (state.submitForm.pageType == '2') {
		state.submitForm.newFormId = '';
		state.submitForm.modFormId = '';
		state.submitForm.detailFormId = '';
	}
};

const previewFn = () => {
	state.previewList = state.submitForm.componentList.map((item: any) => JSON.parse(item.detailFormJson ? item.detailFormJson : item.formDesJson));
	state.previewVisible = true;
};

const addFn = () => {
	state.ListVisible = true;
};

const deleteItem = (index: any) => {
	state.submitForm.componentList.splice(index, 1);
};

const sureFn = () => {
	state.ListVisible = false;
	ComponentList_ref.value.state.pageParam.selectList.forEach((item: any) => {
		item.orderNum = state.submitForm.componentList.length + 1; // 添加 orderNum 属性
		state.submitForm.componentList.push(item);
	});
	state.submitForm.componentList = state.submitForm.componentList.filter((item: any, index: any, self: any) => {
		return index === self.findIndex((t: any) => t.componentId === item.componentId);
	});
	state.submitForm.componentList.forEach((item: any) => {
		item.designerId = state.row_designerId;
		item.designerCode = state.row_designerCode;
	});
};

const treeChange = (val: any) => {
	// console.log(val,'选中的数据');
};

const getTree = () => {
	state.listLoading = true;
	developApi
		.getWfProcessFolderTree()
		.then((data) => {
			if (data && data.code == 0) {
				state.treeData = [data.data];
			} else {
				ElMessage.error(data.message);
			}
		})
		.catch(() => {
			ElMessage.error('获取流程目录失败');
		})
		.finally(() => {
			state.listLoading = false;
		});
};

const loadList = () => {
	state.listLoading = true;
	developApi
		.querySysBusinessDesignerListPage(state.pageParam)
		.then((data) => {
			if (data && data.code === 0) {
				state.dataList = data.data.records.map((item: any, index: any) => {
					item.orderNum = index + 1; // 添加 orderNum 属性
					return item;
				});
				state.total = data.data.totalRow;
			} else {
				state.dataList = [];
				state.total = 0;
			}
		})
		.catch(() => {})
		.finally(() => {
			state.listLoading = false;
		});
};
// 页面加载时
onMounted(() => {
	// 数据字典
	getDataDictionaryList(state.dataDictionaryList, ['1008', 'BUSINESS_TYPE', 'SCREEN_STATUS', 'devFormType']);
	// 列表查询
	loadList();
	//获取流程目录
	getTree();
});

watch(
	() => state.submitForm.hasTask,
	(val: string) => {
		if (val === '1') {
			state.submitFormRule.taskDefCode.required = true;
		} else {
			state.submitFormRule.taskDefCode.required = false;
		}
	}
);
watch(
	() => state.submitForm.customizeApi,
	(val: string) => {
		if (val === '1') {
			state.submitFormRule.addApiUrl.required = true;
			state.submitFormRule.updateApiUrl.required = true;
			state.submitFormRule.detailApiUrl.required = true;
		} else {
			state.submitFormRule.addApiUrl.required = false;
			state.submitFormRule.updateApiUrl.required = false;
			state.submitFormRule.detailApiUrl.required = false;
		}
	}
);
watch(
	() => state.submitForm.designerCode,
	(val: string) => {
		state.submitForm.menuTxt = '/apps/dynamicAppBusinessAdd/:app/' + ':' + val + '/:' + state.submitForm.designerName;
	}
);
watch(
	() => state.submitForm.designerName,
	(val: string) => {
		state.submitForm.menuTxt = '/apps/dynamicAppBusinessAdd/:app/' + ':' + state.submitForm.designerCode + '/:' + val;
	}
);

//重置
const reSetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.pageParam.page = 1;
	loadList();
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.pageParam.pageSize = val;
	loadList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.pageParam.page = val;
	loadList();
};
//删除
const deleteHandle = (id: string | undefined) => {
	if (!id) {
		ElMessage.error('请选择记录！');
		return;
	}
	ElMessageBox.confirm('是否确定删除所选记录', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(() => {
		developApi
			.deleteSysBusinessDesignerInfo(id)
			.then((data) => {
				if (data && data.code === 0) {
					ElMessage.success('删除成功');
					loadList();
				} else {
					ElMessage.error(data.message);
				}
			})
			.catch(() => {
				ElMessage.error('删除失败');
			});
	});
};
//打开新增弹窗
const addOrUpdateHandle = () => {
	state.submitForm = {
		id: '',
		version: '',
		designerCode: '',
		designerName: '',
		typeCode: '',
		hasTask: '',
		taskDefCode: '',
		newFormId: '',
		modFormId: '',
		detailFormId: '',
		menuTxt: '',
		customizeApi: '0',
		addApiUrl: '',
		updateApiUrl: '',
		detailApiUrl: '',
		pageType: '',
		componentList: [],
		resStatus: '0',
	};
	state.addOrUpdateVisible = true;
};
//打开修改弹窗
const updateHandle = (row: any | undefined) => {
	state.row_designerId = row.id;
	state.row_designerCode = row.designerCode;
	// state.submitForm = {
	// 	id: row.id,
	// 	version: row.version,
	// 	designerCode: row.designerCode,
	// 	designerName: row.designerName,
	// 	typeCode: row.typeCode,
	// 	hasTask: row.hasTask,
	// 	taskDefCode: row.taskDefCode,
	// 	newFormId: row.newFormId,
	// 	modFormId: row.modFormId,
	// 	detailFormId: row.detailFormId,
	// 	menuTxt: row.menuTxt,
	// 	customizeApi: row.customizeApi,
	// 	addApiUrl: row.addApiUrl,
	// 	updateApiUrl: row.updateApiUrl,
	// 	detailApiUrl: row.detailApiUrl,
	//   pageType: row.pageType,
	// 	componentList: row.componentList
	// 		? row.componentList.map((item: any, index: any) => {
	// 				item.orderNum = index + 1; // 添加 orderNum 属性
	// 				return item;
	// 		})
	// 		: [],
	// };
	state.addOrUpdateVisible = true;
	const loading = ElLoading.service({
		lock: true,
		text: '加载中',
		background: 'rgba(0, 0, 0, 0.7)',
	});
	developApi
		.getInfo(row.id)
		.then((data) => {
			if (data && data.code == 0) {
				if (data.data.componentList.length > 0) {
					data.data.componentList.sort((a: any, b: any) => a.orderNum - b.orderNum);
				}
				state.submitForm = data.data;
			} else {
				ElMessage.error(data.message);
			}
		})
		.catch(() => {
			ElMessage.error('获取详情失败');
		})
		.finally(() => {
			loading.close();
		});
};
//新增修改提交
const dataFormSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			//提交数据
			const loading = ElLoading.service({
				lock: true,
				text: '处理中',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			if (!state.submitForm.id) {
				//新增
				developApi
					.saveSysBusinessDesignerInfo(state.submitForm)
					.then((data) => {
						if (data && data.code === 0) {
							ElMessage.success('保存成功');
							state.addOrUpdateVisible = false;
							loadList();
						} else {
							ElMessage.error(data.message);
						}
					})
					.catch(() => {
						ElMessage.error('保存失败');
					})
					.finally(() => {
						loading.close();
					});
			} else {
				state.submitForm.componentList.forEach((item: any) => {
					(item.designerId = state.row_designerId), (item.designerCode = state.row_designerCode);
				});
				developApi
					.updateSysBusinessDesignerInfo(state.submitForm)
					.then((data) => {
						if (data && data.code === 0) {
							ElMessage.success('保存成功');
							state.addOrUpdateVisible = false;
							loadList();
						} else {
							ElMessage.error(data.message);
						}
					})
					.catch(() => {
						ElMessage.error('保存失败');
					})
					.finally(() => {
						loading.close();
					});
			}
		}
	});
};
const formatStatus = (row: any, column: any, cellValue: string | number, index: number) => {
	if (Object.keys(state.dataDictionaryList).length > 0) {
		if (cellValue) {
			return state.dataDictionaryList[column.columnKey].get(cellValue);
		}
	}
};
const remoteMethod = (name: string) => {
	state.remoteLoading = true;
	developApi
		.getFormDesignerByNameLike(name)
		.then((data) => {
			if (data && data.code === 0) {
				// data.data.forEach(element => {
				//     let as = {value: element.id, label: element.formName}
				//     state.remoteOptions.push(as)
				// })
				nextTick(() => {
					state.remoteOptions = data.data.map((element: any) => {
						return {
							value: element.id,
							label: element.formName,
						};
					});
				});
			}
		})
		.finally(() => {
			state.remoteLoading = false;
		});
};

// 上移
const moveUp = (index: any) => {
	if (index > 0) {
		const list = [...state.submitForm.componentList];
		const temp = list[index];
		list[index] = list[index - 1];
		list[index - 1] = temp;
		// 更新 orderNum
		list.forEach((item, i) => {
			item.orderNum = i + 1;
		});
		state.submitForm.componentList = list;
	}
};

// 下移
const moveDown = (index: any) => {
	if (index < state.submitForm.componentList.length - 1) {
		const list = [...state.submitForm.componentList];
		const temp = list[index];
		list[index] = list[index + 1];
		list[index + 1] = temp;
		// 更新 orderNum
		list.forEach((item, i) => {
			item.orderNum = i + 1;
		});
		state.submitForm.componentList = list;
	}
};
</script>

<style scoped>
.main_tab ::v-deep .el-table__body-wrapper {
	height: auto !important;
}
.main_tab ::v-deep .el-table__row .el-form-item .el-form-item__content {
	margin-left: 20px !important;
	/* margin-bottom: 20px !important; */
}

/* .sort-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.el-button {
	padding: 5px;
} */
</style>
